import React, { useEffect, useState } from 'react';
import { Button, Card, DatePicker, DatePickerProps, Input, Select, Space, Pagination } from 'antd';
import './OrderManagement.css'; // 自定义样式文件
import axios from 'axios'; // 用于发起 HTTP 请求
import { utils, writeFile } from 'xlsx'; // 导入 xlsx 库用于导出 Excel 文件

// 定义订单数据接口
interface allData {
    id: string, // 订单ID
    name: string, // 业务员名字
    price: number, // 商品价格
    img: string, // 商品图片链接
    title: string, // 商品标题
    type: string, // 订单状态
    shopprice: number, // 商家价格
    word: string, // 买家姓名
    shopname: string, // 商家名称
    tel: string, // 电话号码
    address: string, // 地址
}

// 日期选择器的改变事件处理器
const onChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString); // 打印选中的日期及其字符串形式
};

// tab切换数据
const tabsNav = ['全部', '待付款', '待发货', '待收货', '已完成', '已关闭'];

// 主组件
const OrderManagement: React.FC = () => {
    // 状态变量声明
    const [activeTabNav, setActiveTabNav] = useState(0); // tab切换状态
    const [allList, setAllList] = useState<allData[]>([]); // 订单列表数据
    const [searchOrderNumber, setSearchOrderNumber] = useState<string>(''); // 搜索输入框的状态
    const [selectedStatus, setSelectedStatus] = useState<string>('全部'); // 选定的订单状态
    const [currentPage, setCurrentPage] = useState(1); // 当前页码
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const [pageSize, setPageSize] = useState(10); // 每页显示的数量

    // tab切换导航点击事件
    const handelTabNav = (index: number) => {
        setActiveTabNav(index); // 设置激活标签索引
    };

    // 获取订单列表数据
    const getData = async () => {
        try {
            const response = await axios.get("/api/allList"); // 发起 GET 请求获取订单数据
            const { code, allList } = response.data; // 解构响应数据
            if (code === 200) { // 如果请求成功
                setAllList(allList); // 更新订单列表数据
            }
        } catch (error) {
            console.error("Error fetching order list:", error); // 打印错误信息
        }
    };

    // 初始化时获取数据
    useEffect(() => {
        getData(); // 加载订单数据
    }, []); // 依赖数组为空，仅在组件挂载时执行一次


    // 过滤订单列表的方法
    const filteredList = () => {
        return allList.filter(item => { // 过滤订单列表
            const matchesTab = activeTabNav === 0 || item.type === tabsNav[activeTabNav]; // 基于激活标签匹配
            const matchesSearch = item.id.includes(searchOrderNumber); // 基于搜索输入匹配
            const matchesStatus = selectedStatus === '全部' || item.type === selectedStatus; // 基于选定状态匹配
            return matchesTab && matchesSearch && matchesStatus; // 返回匹配的结果
        }).slice((currentPage - 1) * pageSize, currentPage * pageSize); // 分页数据
    };
    // 当点击分页组件时触发
    const handlePageChange = (page: number) => {
        setCurrentPage(page);
    };

    // 处理下拉选择改变的函数
    const handleChange = (value: string) => {
        setSelectedStatus(value); // 设置选定状态
        console.log(`Selected status: ${value}`); // 打印选定的状态
    };

    // 清除筛选条件
    const clearFilters = () => {
        setSearchOrderNumber(''); // 重置搜索输入框
        setSelectedStatus('全部'); // 重置选定状态
    };

    // 导出Excel表格
    const exportToExcel = () => {
        const data = filteredList(); // 获取过滤后的数据
        const worksheet = utils.json_to_sheet(data); // 将 JSON 数据转换为工作表
        const workbook = utils.book_new(); // 创建一个新的工作簿
        utils.book_append_sheet(workbook, worksheet, 'Orders'); // 将工作表附加到工作簿
        writeFile(workbook, 'orders.xlsx'); // 写入文件
    };


    return (
        <div className='OrderMainList-Box'>
            <Card style={{ marginBottom: '15px' }}>
                <div className='OrderManagement-top'>
                    <div className='OrderManagement-title'>订单管理</div>
                    <div className='OrderManagement-con'>
                        <div className="OrderManagement-con1">
                            <div className="OrderManagement-number">
                                <p>订单编号: <Input
                                    placeholder="请输入订单编号"
                                    style={{ width: 150 }}
                                    value={searchOrderNumber} // 确保输入框反映状态
                                    onChange={(e) => setSearchOrderNumber(e.target.value)} // 更新搜索状态
                                /></p>
                            </div>
                            <div className="OrderManagement-date">
                                <p>日期查询: <Space style={{ width: 150, marginRight: '60px' }} direction="vertical">
                                    <DatePicker onChange={onChange} /> {/* 日期选择器 */}
                                </Space></p>
                            </div>
                        </div>
                        <div className="OrderManagement-con2">
                            <div className="OrderManagement-select1">
                                订单状态:
                                <Select
                                    value={selectedStatus} // 使用状态作为当前值
                                    style={{ width: 150, marginRight: '27px' }}
                                    onChange={handleChange} // 处理下拉选择改变
                                    options={[
                                        { value: '全部', label: '全部' },
                                        { value: '待付款', label: '待付款' },
                                        { value: '待发货', label: '待发货' },
                                        { value: '待收货', label: '待收货' },
                                        { value: '已完成', label: '已完成' },
                                        { value: '已关闭', label: '已关闭' },
                                    ]}
                                />
                            </div>
                            <div className="OrderManagement-select2">
                                退款状态:
                                <Space wrap>
                                    <Select
                                        defaultValue="暂不选择"
                                        style={{ width: 150, marginRight: '50px' }}
                                        onChange={handleChange} // 处理下拉选择改变
                                        options={[
                                            { value: '全部', label: '全部' },
                                            { value: '待付款', label: '待付款' },
                                            { value: '待发货', label: '待发货' },
                                            { value: '待收货', label: '待收货' },
                                            { value: '已完成', label: '已完成' },
                                            { value: '已关闭', label: '已关闭' },
                                        ]}
                                    />
                                </Space>
                            </div>
                        </div>
                    </div>
                </div>
                <Button style={{ width: '120px', marginLeft: '30px', backgroundColor: '#1a66ff', color: '#fff' }}>筛选订单</Button>
                <Button
                    style={{ width: '130px', marginLeft: '30px' }}
                    onClick={clearFilters} // 点击清除筛选条件事件
                >
                    清空筛选条件
                </Button>
                <Button onClick={exportToExcel} style={{ width: '130px', marginLeft: '30px' }}>批量导出</Button> {/* 导出Excel按钮 */}
            </Card>
            <div className='OrderMainList-Tab'>
                {/* 渲染tab切换路由 */}
                <div className="OrderMainList-Nav">
                    {tabsNav.map((tab, index) => ( // 渲染tab导航栏
                        <div
                            key={index}
                            className={`tabMainList ${activeTabNav === index ? 'active1' : ''}`} // 切换类名
                            onClick={() => handelTabNav(index)} // 切换标签
                        >
                            {tab}
                        </div>
                    ))}
                </div>
            </div>
            <div className="OrderMainList-Con">
                <div className="OrderMainList-title">
                    <p style={{ width: '480px', textAlign: 'center' }}>订单信息</p>
                    <p style={{ width: '350px', textAlign: 'center' }}>卖家</p>
                    <p style={{ width: '540px', textAlign: 'center' }}>收货信息</p>
                    <p>操作</p>
                </div>
                {/* // 渲染订单列表 */}
                <div className='OrderCon1'>
                    {
                        filteredList().map((item, index) => (
                            <div key={index} className='shop'>
                                <div className='shoptop'>
                                    <div className='shopnumber'>订单号: {item.id}</div>
                                    <div className='salesman'>业务员: {item.name}</div>
                                    <div className='shopzprice'>共1件商品 合计: ￥{item.price} (含运费: ￥0.00)</div>
                                </div>
                                <div className='shopinfomation'>
                                    <div className='shopimage'>
                                        <img src={item.img} style={{ width: "100%", height: "100%" }} alt="" /> {/* 商品图片 */}
                                    </div>
                                    <div className='shopname'>
                                        <p>{item.title}</p>
                                        <p style={{ color: "red" }}>{item.type}</p>
                                    </div>
                                    <div className='shopprice'>￥{item.price}</div>
                                    <div className='shopper'>{item.word}</div>
                                    <div className='shopcon'>
                                        <p>
                                            <span>{item.shopname}&emsp;</span>
                                            <span>{item.tel}</span>
                                        </p>
                                        <p>{item.address}</p>
                                    </div>
                                    <div className='shopdetail'>订单详情</div>
                                </div>
                            </div>
                        ))
                    }
                </div>
                {/* 添加分页 */}
                <Pagination
                    current={currentPage}
                    pageSize={pageSize}
                    total={allList.length} // 总条目数量
                    onChange={handlePageChange}// 分页改变事件
                    style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '15px' }}
                />
            </div>

        </div>
    );
};

export default OrderManagement;